<template>
  <el-form ref="form" :model="user" :rules="rules" label-width="90px" class="pwd-form">
    <div class="form-title">
      <i class="el-icon-lock"></i>
      <span>修改密码</span>
      <div class="title-line"></div>
    </div>

    <el-form-item label="旧密码" prop="oldPassword">
      <el-input
        v-model="user.oldPassword"
        placeholder="请输入旧密码"
        type="password"
        show-password
      >
        <template #prefix><i class="el-icon-key"></i></template>
      </el-input>
    </el-form-item>

    <el-form-item label="新密码" prop="newPassword">
      <el-input
        v-model="user.newPassword"
        placeholder="请输入新密码（6-20位）"
        type="password"
        show-password
      >
        <template #prefix><i class="el-icon-shield"></i></template>
      </el-input>
      <div class="tip-text">
        <i class="el-icon-info"></i> 建议包含字母和数字，提高账户安全性
      </div>
    </el-form-item>

    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input
        v-model="user.confirmPassword"
        placeholder="请再次输入新密码"
        type="password"
        show-password
      >
        <template #prefix><i class="el-icon-check"></i></template>
      </el-input>
    </el-form-item>

    <el-form-item class="form-actions">
      <el-button type="primary" @click="submit" class="btn-save">
        <i class="el-icon-check"></i> 保存修改
      </el-button>
      <el-button @click="close" class="btn-cancel">
        <i class="el-icon-undo"></i> 取消
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
// 脚本部分保持不变
import { updateUserPwd } from "@/api/system/user";

export default {
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.user.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      user: {
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined
      },
      rules: {
        oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
        newPassword: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { min: 6, max: 20, message: "密码长度需在6-20个字符之间", trigger: "blur" },
          { pattern: /^[^<>"'|\\]+$/, message: "不支持特殊字符", trigger: "blur" }
        ],
        confirmPassword: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { validator: equalToPassword, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(() => {
            this.$message.success("密码修改成功，请重新登录");
            this.close();
          }).catch(() => {
            this.$message.error("修改失败，请检查旧密码是否正确");
          });
        }
      });
    },
    close() {
      this.$tab.closePage();
    }
  }
};
</script>

<style scoped lang="scss">
$color-primary: #4CAF50;
$color-secondary: #8D6E63;

.pwd-form {
  padding: 20px;
  background-color: #fcfcfc;
  border-radius: 6px;
  border: 1px solid #f5f5f5;

  .form-title {
    display: flex;
    align-items: center;
    color: $color-secondary;
    font-size: 16px;
    margin-bottom: 20px;

    i {
      color: $color-primary;
      margin-right: 8px;
    }

    .title-line {
      flex-grow: 1;
      height: 1px;
      background-color: #f5f5f5;
      margin-left: 10px;
    }
  }

  .tip-text {
    margin-top: 5px;
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;

    i {
      color: $color-primary;
      margin-right: 5px;
      font-size: 12px;
    }
  }

  .form-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
  }

  .btn-save {
    background-color: $color-primary;
    border-color: $color-primary;

    &:hover {
      background-color: #388e3c;
    }
  }

  .btn-cancel {
    background-color: white;
    color: $color-secondary;
    border-color: #e0e0e0;

    &:hover {
      background-color: #f5f5f0;
    }
  }

  // 将 ::v-deep 改为 :deep()
  :deep(.el-input__prefix) {
    color: $color-primary;
  }
}
</style>
